<template>
  <div>
    <!--对话框start-->
    <el-dialog :title="title" :visible.sync="dialogVisible" class="dialog" width="40%">
        <el-form>
          <el-form-item label="所属楼栋" prop="buildingId">
            <el-select v-model="form.buildingId" placeholder="所属楼栋" size="mini">
              <el-option v-for="item in buildingOptions"
                         :key="item.buildingId"
                         :label="item.buildingName"
                         :value="item.buildingId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="小区名称" prop="buildingId">
            <el-select v-model="form.communityId" placeholder="小区名称"  clearable size="mini">
              <el-option v-for="item in communityNameList"
                         :key="item.communityId"
                         :label="item.communityName"
                         :value="item.communityId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元名称" prop="unitName">
            <el-input size="mini" v-model="form.unitName" placeholder="请输入单元名称"/>
          </el-form-item>
          <el-form-item label="单元编号" prop="unitCode">
            <el-input size="mini" v-model="form.unitCode" placeholder="请输入单元编号"/>
          </el-form-item>
          <el-form-item label="层数" prop="level">
            <el-input size="mini" v-model="form.unitLevel" placeholder="请输入层数"/>
          </el-form-item>
          <el-form-item label="建筑面积" prop="unitAcreage">
            <el-input size="mini" v-model="form.unitAcreage" placeholder="请输入建筑面积"/>
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item prop="unitHaveElevator" label="是否有电梯">
            <br>
            <el-radio v-model="form.unitHaveElevator" label="0">是</el-radio>
            <el-radio v-model="form.unitHaveElevator" label="1">否</el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input size="mini" type="textarea" v-model="form.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
      <el-row>
        <el-col :span="24" style="margin-left: 30%">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button style="margin-left: 8%" type="primary" @click="save">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--对话框end-->
    <!--表单开始-->
    <el-form :model="queryFormParam" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="单元名称" prop="unitName">
        <el-input v-model="queryFormParam.unitName" placeholder="请输入单元名称"/>
      </el-form-item>
      <el-form-item label="单元编号" prop="unitCode">
        <el-input v-model="queryFormParam.unitCode" placeholder="请输入单元编号"/>
      </el-form-item>
      <el-form-item label="是否有电梯" prop="unitHaveElevator" label-width="90px">
        <el-select v-model="queryFormParam.unitHaveElevator" placeholder="请选择是否有电梯" >
          <el-option
            v-for="elevator in elevatorList"
            :key="elevator.dictValue"
            :label="elevator.dictLabel"
            :value="elevator.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属楼栋" prop="buildingId">
        <el-select v-model="queryFormParam.buildingId" placeholder="所属楼栋">
          <el-option v-for="item in buildingOptions"
                     :key="item.buildingId"
                     :label="item.buildingName"
                     :value="item.buildingId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" size="mini" @click="search()"><i
        class="el-icon-search"
      />搜索
      </el-button>
      <el-button size="mini" @click="reset"><i class="el-icon-refresh" style="color: #F38181"/>重置</el-button>
      <br>
      <el-form-item label="小区名称" prop="buildingId">
        <el-select v-model="queryFormParam.communityId" placeholder="小区名称" @change="selectCommunityById" clearable
                   @click="getList">
          <el-option v-for="item in communityNameList"
                     :key="item.communityId"
                     :label="item.communityName"
                     :value="item.communityId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!--表单结束-->
    <!-- 批量操作   新增 删除 导出-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="isSelected" @click="add">新增</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="update()">修改</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteCommunityByIds">
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" :disabled="multiple" @click="exportTable">导出
        </el-button>
      </el-col>
    </el-row>
    <br>
    <!-- 表格开始   -->
    <el-table
      ref="multipleTable"
      :data="UnitPageList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="单元id"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.unitId }}</template>
      </el-table-column>
      <el-table-column
        label="小区名称"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.communityName }}</template>
      </el-table-column>
      <el-table-column
        label="楼层"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.buildingName }}</template>
      </el-table-column>
      <el-table-column
        label="单元名称"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.unitName }}</template>
      </el-table-column>
      <el-table-column
        label="单元编号"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.unitCode }}</template>
      </el-table-column>
      <el-table-column
        label="层数"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.unitLevel }}</template>
      </el-table-column>
      <el-table-column
        label="建筑面积"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.unitAcreage }}</template>
      </el-table-column>
      <el-table-column
        label="是否有电梯"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.unitHaveElevator == 0 ? "是" : "否" }}</template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        label="备注"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <a href="#" style="color: dodgerblue" @click="updateOne(scope.row)"><i class="el-icon-edit">修改</i></a>
          <a href="#" style="color: dodgerblue" @click="deleteOne(scope.row)"><i class="el-icon-delete-solid">删除</i></a>
        </template>


      </el-table-column>
    </el-table>
    <!-- 表格结束  -->
<!--    分页-->
    <el-pagination
      :current-page="this.currentPage"
      :page-sizes="[4, 8, 14, 20]"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>

  </div>
</template>

<script>
export default {
  data() {
    return {
      UnitPageList: [],
      form: {},
      dicts:["sys_yes_no"],
      dict:null,
      allRoomStatus:[],
      queryFormParam: {
        "unitId": "",
        "unitName": "",
        "unitCode": "",
        "unitLevel": "",
        "unitAcreage": "",
        "unitHaveElevator": "",
        "createTime": "",
        "remark": "",
        "communityId": "",
        "buildingName": "",
        "buildingId": ""
      },
      total: 0,
      pageSize: 4,
      currentPage: 1,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //选中为禁用
      isSelected: false,
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false,
      ids: [],
      //是否有电梯的集合
      elevatorList: [],
      //楼栋名称的集合
      buildingOptions: [],
      //小区名称集合
      communityNameList: [],
      title: ""
    }
  }, methods: {
    loadUnitPageList(currentPage, pageSize) {


      this.axios.post("/unit/pageList?currentPage=" + currentPage + "&pageSize=" + pageSize + "&communityId=" + this.queryFormParam.communityId, this.queryFormParam)
        .then(res => {
          this.UnitPageList = res.data.data.records
          // if(res.data.data.records.length==0){
          //   this.currentPage-=1;
          // }
          this.total = res.data.data.total
        })

    }, loadElevator() {
      this.axios.get("/intelligence_community/sys-dict-data/elevator").then(res => {
        this.elevatorList = res.data.data;
      })
    }, loadBuildingNameList() {
      this.axios.get("/building/all").then(res => {
        this.buildingOptions = res.data.data;
      })
    }, loadCommunityNameList() {
      this.axios.get("/community/all").then(res => {
        this.communityNameList = res.data.data;
      })
    },
    handleSizeChange(pageSize) {

      this.pageSize = pageSize
      this.loadUnitPageList(this.currentPage, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loadUnitPageList(currentPage, this.pageSize)
    }, handleSelectionChange(selection) {
      this.ids = selection.map(item => item.unitId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.isSelected = selection.length !== 0
    },
    search() {
      this.loadUnitPageList(this.currentPage, this.pageSize)

    },

    reset() {
      this.queryFormParam.unitName = ""
      this.queryFormParam.unitCode = ""
      this.queryFormParam.unitHaveElevator = ""
      this.queryFormParam.buildingId = ""
      this.queryFormParam.communityId = ""
      this.loadUnitPageList(this.currentPage, this.currentPage)
    },
    add() {
      this.title = "新增单元"
      this.dialogVisible = true

    },
    update(row) {



    },
    deleteCommunityByIds(row) {
      const unitId = row.unitId || this.ids

      this.axios.post('/unit/deleteByIds', unitId).then(res => {
        if (res.data.data === '删除成功') {
          this.$message({
            message: '删除成功!',
            type: 'success',
            center: 'true'
          })
        }
      if((this.total-this.ids.length)%this.pageSize==0){
        this.currentPage-=1
      }
          this.loadUnitPageList(this.currentPage, this.pageSize)
      })
    },
    exportTable(row) {
      const unitId = row.unitId || this.ids
      this.axios.post('/unit/excel', unitId).then(res => {
        if (res.data.data === '导出成功') {
          this.$message({
            message: '已成功导入桌面',
            type: 'success'
          })
        }
      })

    }, save() {
      if (typeof (this.form.unitId) == 'undefined') {
        this.axios.post("/unit/add",this.form).then(res=>{
          if(res.data.data==="添加成功"){

            this.dialogVisible=false;
            this.form={unitId: "", unitName: "", unitCode: "", unitLevel: "", unitAcreage: "", unitHaveElevator: "", createTime: "", remark: "", communityId: "", buildingName: "", buildingId: ""}
            this.loadUnitPageList(this.currentPage,this.pageSize)
          }
          }
        )
      } else {
        console.log(this.form)
        this.axios.post("/unit/update",this.form).then(res=>{
            if(res.data.data==="修改成功"){
              console.log(res.data.data)
              this.dialogVisible=false;
              this.form={unitId: "", unitName: "", unitCode: "", unitLevel: "", unitAcreage: "", unitHaveElevator: "", createTime: "", remark: "", communityId: "", buildingName: "", buildingId: ""}
              this.loadUnitPageList(this.currentPage,this.pageSize)
            }
          }
        )
      }
    },
    deleteOne(row) {
        this.axios.get("/unit/delOne/"+row.unitId).then(res=>{
            if(res.data.data=="删除成功"){

              this.loadUnitPageList(this.currentPage,this.pageSize)
            }

        })

    }, getList() {
      this.queryFormParam.communityId = ""
      this.loadUnitPageList(this.currentPage, this.pageSize)
    },
    updateOne(row) {
      this.dialogVisible = true
      this.title = '修改单元'
      this.form = row
    }, selectCommunityById() {
      this.loadUnitPageList(this.currentPage, this.pageSize)
    },
  }, created() {
    this.loadUnitPageList(this.currentPage, this.pageSize)
    this.loadElevator();
    this.loadBuildingNameList();
    this.loadCommunityNameList();
    // this.getDictData();
  }
}
</script>

<style scoped>

</style>
